<template>
	<view class="content">
		<view class="infoBox">
			<image :src="user.head" class="avatar"></image>
			<text class="name">{{user.name|| '暂无昵称'}}</text>
			<text class="num">{{user.sn}}</text>
			<view class="line"></view>
			<view class="qrBox" v-if="text">
				<!-- <u-qrcode ref="qrcode" class="qrcode" canvas-id="qr" :value="text" :size="size"></u-qrcode> -->
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="text" :size="size"></uqrcode>
			</view>
			<image :src="baseUrl+'img/code/tips.png'" class="tips"></image>
		</view>
		<!-- <m-tabbar fixed fill current="2" :tabbar="tabbar">
		</m-tabbar> -->
		<cc-myTabbar :tabBarShow="2"></cc-myTabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				text: '',
				size: 120,
				user: '',
			}
		},
		onShow() {
			uni.hideTabBar();
		},
		onLoad() {
			uni.hideHomeButton();
			uni.hideTabBar();
			if (this.token) {
				this.getData();
			} else {
				this.$store.watch(
					(state) => state.token,
					(newToken) => {
						if (newToken) {
							this.getData();
						}
					}
				);
			}
		},
		methods: {
			getData() {
				this.$request.get('center').then(res => {
					this.user = res.data.data;
					this.text=this.user.sn+'&1'//1表示个人二维码
				})
			},
		},
		computed: {
			...mapState(['token']),
		},
	}
</script>

<style lang="scss">
	.infoBox {
		width: 670rpx;
		height: 980rpx;
		background: url('https://qn-h5-video.guguan.net/juanjiahui/img/code/bg2.png');
		background-size: 100% 100%;
		margin-top: 170rpx;
		margin-left: 40rpx;
		display: flex;
		align-items: center;
		flex-direction: column;

		.qrBox {
			width: 285rpx;
			height: 285rpx;
			margin-top: 88rpx;
			border: 1rpx solid #000000;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.tips {
			width: 480rpx;
			height: 78rpx;
			margin-top: 75rpx;
		}

		.line {
			width: 476rpx;
			border-bottom: 2rpx dotted #c2c2c2;
			margin-top: 85rpx;
		}

		.num {
			margin-top: 35rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #121212;
		}

		.name {
			font-weight: 900;
			font-size: 36rpx;
			color: #121212;
			margin-top: 85rpx;
		}

		.avatar {
			width: 152rpx;
			height: 152rpx;
			border-radius: 50%;
			margin-top: -76rpx;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
		background: url('https://qn-h5-video.guguan.net/juanjiahui/img/code/bg1.jpg');
		background-size: 100% 100%;
		overflow: hidden;
	}
</style>